{extend name="public/base"/}
{block name="style"}
{/block}
{block name="content"}
<div class="data-list layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">按订单</li>
        <li>按重量</li>
        <li>按商品</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <input type="text" name="order_sn" class="layui-input input-order-sn" autocomplete="off" autofocus="autofocus" placeholder="订单号">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="order"><i class="layui-icon layui-icon-cellphone-fine"></i>试算</button>
                    </div>
                </div>
            </form>
            <div id="channel-order"></div>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <select name="country_code" lay-search>
                                <option value="">国家</option>
                                {foreach $counties as $c}
                                <option value="{$c.code_two}">{$c.name_ch}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <input type="number" name="weight" class="layui-input input-order-sn" autocomplete="off" autofocus="autofocus" placeholder="重量(g)">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="weight"><i class="layui-icon layui-icon-cellphone-fine"></i>试算</button>
                    </div>
                </div>
            </form>
            <div id="channel-weight"></div>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form inline-form">
                <div class="pull-left">
                    <div class="layui-inline">
                        <select name="country_code" lay-search>
                            <option value="">国家</option>
                            {foreach $counties as $c}
                            <option value="{$c.code_two}">{$c.name_ch}</option>
                            {/foreach}
                        </select>
                    </div>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="min-width: 200px;">SKU</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="operation">
                            <td colspan="4" class="text-center">
                                <button type="button" class="layui-btn layui-btn-sm" id="product-reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm calculate" c-type="sku"><i class="layui-icon layui-icon-cellphone-fine"></i>试算</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </form>
            <div id="channel-sku"></div>
        </div>
    </div>
</div>
<script type="text/html" id="data-product-template">
    <tr class="product-list">
        <td>
           <div class="sku-select"></div>
        </td>
        <td>
            <div class="layui-inline"><input type="number" name="qty[]" value="1" class="layui-input qty" autocomplete="off" placeholder="数量"></div>
        </td>
        <td>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-row-add" style="margin-bottom: 3px;">
                <i class="layui-icon layui-icon-add-1"></i>
            </button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm data-row-remove">
                <i class="layui-icon layui-icon-delete"></i>
            </button>
        </td>
    </tr>
</script>
{/block}
{block name="script"}
<script type="text/javascript">
layui.extend({
    xmSelect: 'xm-select'
}).use(['layer', 'jquery', 'xmSelect', 'element'], function()
{
    var layer = layui.layer
        , $ = layui.jquery;
    // 自动添加报价单详情
    if($(".layui-table .product-list").length < 1)
    {
        var html = $("#data-product-template").html();
        $(".layui-table tbody").prepend(html);
        renderSearch($(".sku-select:last").get(0));
    }
    // 添加行
    $(".layui-table").on("click", ".data-row-add", function()
    {
        var html = $("#data-product-template").html();
        $(".layui-table .product-list:last").after(html);
        renderSearch($(".sku-select:last").get(0));
    });

    // 删除行
    $(".layui-table").on("click", ".data-row-remove",function()
    {
        if($(".layui-table .product-list").length == 1)
        {
            layer.msg('只有一条不允许删除。', {time : 2000});
            return;
        }
        $(this).parent().parent().remove();
    });

    // 重置
    $("#product-reset").click(function()
    {
        $(".product-list").remove();
        var html = $("#data-product-template").html();
        $(".layui-table tbody").prepend(html);
        renderSearch($(".sku-select:last").get(0));
    });

    $(".calculate").click(function(evt)
    {
        evt.preventDefault();
        var $this = $(this)
            , $form = $(this).parents("form")
            , cType = ($this.attr("c-type"))
            , url = "{:url('calculate')}?type=" + cType;
        layer.load(0, {shade: false});
        $.post(url, $form.serialize()).done(function(response)
        {
            layer.closeAll('loading');
            if($.type(response) === 'object')
            {
                var icon = response.code == 1 ? 6 : 5;
                layer.msg(response.msg, {icon: icon, time: 1500});
                return;
            }
            $("#channel-" + cType).html(response);
        }).error(function(xhr)
        {
            layer.msg('服务器异常，请稍后重试~', {icon: 5});
            layer.closeAll('loading');
        });
    });

    /**
     * 渲染多选下拉框
     * @param node 需要渲染的节点
     */
    function renderSearch(node)
    {
        var xargs = {
            el: node,
            radio: true,
            clickClose: true,
            data: [],
            prop: {
                name: "sku",
                value: "sku",
            },
            name: "sku",
            filterable: true,
            remoteSearch: true,
            remoteMethod: function (text, callback, show)
            {
                text = text.trim();
                $.post("{:url('wms/product/get')}", {sku: text, more: 1}).done(function (response)
                {
                    if(response.code != 1) return callback([]);
                    callback(response.data);
                });
            }
        };
        layui.xmSelect.render(xargs);
        $("xm-select").css({"min-height": "30px"});
    }
});
</script>
{/block}